<template>
	<view>
		<popup-layer ref="popupRef" :direction="'top'" :autoClose="true" @closeCallBack="closeLog">
			<view class="box">
				<view class="box_title flex">
					<view>任务跟踪</view>
					<uni-icons type="closeempty" size="16" color="#999" @click="closeLog"></uni-icons>
				</view>
				<view v-if="tarkList.length">
					<view class="" v-for="(item, i) in tarkList" :key="i">
						<view class="today">{{ item.createTime }}</view>
						<view class="tarkList" v-for="(e, j) in item.list" :key="j">
							<view class="time">{{ e.createTime }}</view>
							<view class="tark">{{ e.typeName }}</view>
						</view>
					</view>
				</view>
				<view class="empty flex" v-else>暂无数据</view>
			</view>
		</popup-layer>
	</view>
</template>

<script>
import PopupLayer from '../popup-layer/popup-layer.vue';
import { repairLog } from '@/apis/repair.js';
export default {
	components: {
		PopupLayer
	},
	props: {
		
	    planId:{
			type:String,
			required:true,
		},
		show: {
			type: Boolean,
			required: true
		}
	},
	watch: {
		show(val) {
			if (val) {
				this.queryLog();
			}
		}
	},
	data() {
		return {
			tarkList:[]
		};
	},
	
	methods: {
		queryLog() {
			repairLog({ planId: this.planId }).then(res => {
				this.tarkList = res.data;
				this.$refs.popupRef.show();
			});
		},
		closeLog() {
			this.$refs.popupRef.close();
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	background: #ffffff;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	padding: 20rpx;
	height: 500rpx;
	overflow: auto;
	.box_title {
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		height: 60rpx;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
	.today {
		padding: 10rpx 0;
	}
	.tarkList {
		display: flex;
		padding-left: 40rpx;
		height: 70rpx;
		align-items: center;
		color: #333;

		.time {
			padding-right: 40rpx;
			color: #666;
		}
		.tark {
			display: flex;
			flex-wrap: wrap;
		}
	}
}
</style>
